<script setup lang="ts" name="CkColumn">

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  preview: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})

const setStyle = () => {
  return {
    width: props.info.options.attr.w + 'px'
  }
}
</script>

<template>
  <div class="drop-container column" :style="setStyle()">
    <div class="header drag-handle"></div>
    <div class="column-body">
      <template v-if="props.info.children && props.info.children.length > 0">
        <template v-for="item, index in props.info.children" :key="index">
          <template v-if="item.component && item.visible">
            <component :is="item.component" :info="item" :preview="props.preview" :index="index"></component>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.drop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -13px;
  pointer-events: none;

  .header {
    height: 13px;
    pointer-events: none;
  }

  .column-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: var(--el-header-bg-color);

    .tabs-pane+.tabs-pane {
      padding-top: 1px;
    }
  }
}
</style>
